<!DOCTYPE html>
{% load static %}
<html>
<head>
    <meta charset="utf-8">
    <title>
        文章类型添加
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href={% static 'css/font.css' %}>
    <link rel="stylesheet" href="{% static 'css/index.css' %}">
    <script src="{% static 'lib/layui/layui.js' %}" charset="utf-8"></script>
    <script type="text/javascript" src="{% static 'js/index.js' %}"></script>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <!-- 引入 jQuery UI 用于拖拽 -->
    {#    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>#}

    <style>
        .file-upload {
            display: inline-block; /* 块元素转换为行内元素 */
            position: relative; /* 父元素使用相对定位, 方便子元素进行绝对定位 */
            width: 80px; /* 设置元素宽度, 子元素要保持一致 */
            height: 30px; /* 设置元素高度,子元素要保持一致 */
            line-height: 30px; /* 保证label标签内容垂直居中 */
            text-align: center; /* 保证label标签内容水平居中 */
            border-radius: 4px; /* 圆角样式 */
            color: skyblue; /* 字体颜色 */
            border: 1px solid deepskyblue; /* 边框 */
            cursor: pointer;
        }

        .file-upload input {
            position: absolute; /* 子元素绝对定位 */
            top: 0;
            left: 0;
            width: 80px;
            height: 30px;
            opacity: 0; /* 设置透明 */
        }


        .uploaded-image {
            max-width: 100px;
            max-height: 100px;
            margin: 10px;
            cursor: pointer;
            border-radius: 50%; /* 圆角 */
            border: 2px solid #ddd; /* 边框 */
            overflow: hidden; /* 隐藏边框外的部分 */
        }


        .delete-icon {
            position: absolute;
            top: 0;
            right: 0;
            background-color: red;
            color: white;
            padding: 5px;
            cursor: pointer;
        }


        .imgContainer img {
            max-width: 80%; /* 设置最大宽度为父容器的宽度 */
            max-height: 80%; /* 设置最大高度为父容器的高度 */
        {#width: 200px;#}{#height: 200px;#}{#margin: 10px;#}
        }

        /* 每张图片的X删除按钮  通过定位来实现 */

        .imgContainer div {
            position: relative;
            display: inline-block;
        {#flex: 0 0 23%; /* 设置图片容器的宽度百分比，留有间隙 */#}{#margin-bottom: 10px; /* 设置图片容器之间的下边距 */#}
        }


        .imgContainer span {
            position: absolute;
            top: 5px;
            right: 24px;
            background-color: #f00; /* 可选：设置背景颜色 */
            color: #fff; /* 可选：设置文字颜色 */
            padding: 5px; /* 可选：设置内边距 */
            cursor: pointer;
        }

        #imageModal {
            margin-top: 90px;
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            justify-content: center;
            align-items: center;
            overflow: auto; /* 允许模态框内滚动 */
            text-align: center; /* 居中文本 */
            vertical-align: middle; /* 垂直居中 */
        }

        #modalContent {
            width: 80%;
            max-width: 1200px; /* 设置模态框最大宽度 */
        }

        #modalImage {
            width: 74%;
            height: 60%;
            max-height: 80%; /* 限制图片最大高度 */
            object-fit: contain;
        }

        /* Reset default radio button styles */
        input[type="radio"] {
            margin-left: 20px;
            margin-top: 10px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border: 2px solid black;
            border-radius: 50%;
            outline: none;
            cursor: pointer;
        }

        /* Style the checked radio button */
        input[type="radio"]:checked {
            background-color: #3498db;
            border-color: #3498db;
        }

        .image-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: flex-start;
        }

        .img {
            position: relative;
            width: 200px; /* 设置宽度为百分之百，自适应宽度 */
            height: 200px; /* 保持高度不变 */
            color: #fff; /* 可选：设置文字颜色 */
            padding: 5px; /* 可选：设置内边距 */
            box-sizing: border-box; /* 可选：保持宽度包含内边距和边框 */
            margin-bottom: 10px; /* 设置图像之间的垂直间距 */
        }

        .img img {
            width: 100%;
            height: 100%
        }

        .video-container {
            display: block;
            width: 100%;
        }

        .video {

            width: 300px; /* 设置宽度为百分之百，自适应宽度 */
            height: 200px; /* 保持高度不变 */
            color: #fff; /* 可选：设置文字颜色 */
            padding: 5px; /* 可选：设置内边距 */
            box-sizing: border-box; /* 可选：保持宽度包含内边距和边框 */
        }

        .video-container {
            display: block;
        }
    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12 layui-col-xs12 layui-col-sm12">
            <div class="layui-card">
                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">

                            <form novalidate method="post" class="layui-form-pane" action="">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        <span class='x-red'>*</span>小标题
                                    </label>
                                    <div class="layui-input-block">
                                        <input value="{{ form.content_title }}" type="text" name="content_title"
                                               autocomplete="off"
                                               placeholder="请输入"
                                               class="layui-input" id="content_title" lay-verify="required">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        <span class='x-red'>*</span>栏目
                                    </label>
                                    <div class="layui-input-block">
                                        {% for num in nums %}
                                            {% if num ==  form.content_priority %}
                                                <label class="">
                                                    <input checked type="radio" class="content_priority"
                                                           name="content_priority"
                                                           value="{{ num }}">
                                                    {{ num }}
                                                </label>
                                            {% else %}
                                                <label class="">
                                                    <input type="radio" class="content_priority" name="content_priority"
                                                           value="{{ num }}">
                                                    {{ num }}
                                                </label>
                                            {% endif %}

                                        {% endfor %}
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="link" class="layui-form-label">
                                        <span class="x-red">*</span>图片上传
                                    </label>
                                    <div class="layui-input-inline">
                                        <div class="file-upload" onclick="upload()">
                                            上传文件
                                        </div>
                                        <input id="file" type="file" multiple style="display: none;"/>
                                    </div>
                                    <div class="layui-form-item imgs" id="imageDisplay">
                                        <label class="layui-form-label">图片展示
                                        </label>
                                    </div>
                                    <div class="imgContainer image-container">

                                    </div>

                                    <div class="layui-form-item layui-form-text" style="margin-top: 100px;">
                                        <label class="layui-form-label">
                                            <span class='x-red'>*</span>详细内容
                                        </label>
                                        <div class="layui-input-block">
                                <textarea placeholder="请输入内容" class="layui-textarea"
                                          name="content_detail" id="content_detail">{{ form.content_detail }}</textarea>
                                        </div>
                                    </div>
                                    <div class="layui-form-item" style="margin-top: 230px;">
                                        <button type="button" class="layui-btn sub_file">
                                            保存
                                        </button>
                                    </div>
                                </div>
                            </form>
                            <div style="height:600%;"></div>
                        </div>
                    </div>
                </div>
                <div id="imageModal">
                    <div id="modalContent">
                        <img id="modalImage" src="" alt="Enlarged Image">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


</body>

<script>
    var img_files = [];
    var all_files = [];

    function upload() {
        // 获取选择文件的input
        var fileInput = $('#file');

        // 解绑change事件
        fileInput.off('change');

        // 触发文件输入点击事件
        fileInput.click();

        // 绑定change事件
        fileInput.change(function () {
            // 获取选择的文件列表
            var files = this.files;
            var imgDivs = [];
            console.log(files);

            // 检查是否有文件被选择
            if (files.length > 0) {
                // 可以执行额外的验证或其他操作
                // 准备 FormData 以便与 AJAX 请求一起发送
                var formData = new FormData();
                var imgContainer = $('.imgContainer');

                // 将所有选择的文件添加到 FormData
                for (var i = files.length - 1; i >= 0; i--) {
                    formData.append('files', files[i]);
                }
                {#layer.msg('图片上传中', {icon: 16});#}
                for (let i = 0; i < files.length; i++) {
                    all_files.push(files[i]);
                    // 每选择一张图片，就创建一个imgContainer盒子里的div
                    var fileelement = getFileElement(files[i]);

                    imgDivs.push(fileelement);
                }

                imgContainer.append(imgDivs);
                layer.msg('上传成功', {icon: 1});

                // 监听删除全部图片事件
                $('#deleteImg').on('click', function () {
                    imgContainer.empty();
                    fileInput.val(''); // 允许覆盖选择同一个文件
                    $('#uploadImg').css('display', 'none');
                });

                // 鼠标经过和离开图片所在盒子就显示和隐藏左上角的X
                imgContainer.on('mouseenter', 'div', function (e) {
                    $(this).find('span').css('display', 'inline-block');
                }).on('mouseleave', 'div', function (e) {
                    $(this).find('span').css('display', 'none');
                });


                $('.imgContainer div img').on('click', function () {
                    var imageUrl = $(this).attr('src');
                    // 设置模态框中的图片
                    $('#modalImage').attr('src', imageUrl);

                    // 展示模态框
                    $('#imageModal').css('display', 'flex');
                });

                // 关闭模态框
                $('#imageModal').on('click', function () {
                    $(this).css('display', 'none');
                });


            }
        });
    }


    function getFileElement(file) {
        var fileElement;

        if (file.type.startsWith('image/')) {
            // 如果是图片文件，创建 img 元素
            fileElement = $("<div class='img'>")
                .append($("<img>").attr("src", URL.createObjectURL(file)),
                    $("<span style='display: none'>")
                        .text("X")
                        .click(function () {
                            // 删除当前div
                            $(this).parent().remove();
                            // 在点击事件中获取当前文件对象的索引并删除
                            var index = all_files.indexOf(file);
                            if (index !== -1) {
                                all_files.splice(index, 1);
                            }
                            layer.msg('删除成功', {icon: 1});
                        }));
        } else if (file.type.startsWith('video/')) {
            // 如果是视频文件，创建 video 元素
            fileElement = $("<div class='video-container'>")
                .append($("<video controls class='video'>").attr("src", URL.createObjectURL(file)),
                    $("<span style='display: none;right: 0'>")
                        .text("X")
                        .click(function () {
                            // 删除当前div
                            $(this).parent().remove();

                            // 在点击事件中获取当前文件对象的索引并删除
                            var index = all_files.indexOf(file);
                            if (index !== -1) {
                                all_files.splice(index, 1);
                            }
                            layer.msg('删除成功', {icon: 1});
                        })).addClass('video');
        } else {
            // 其他文件类型，创建通用的文件展示元素
            fileElement = $("<span>").text(file.name);
        }

        return fileElement;
    }


    function start() {

        {% for img in form.content_imgs.all %}
            var imgInfo = {
                img: "{{ ip_cos }}{{ content.content_img.name }}",
            };
            var ii = imgInfo.img;
            img_files.push(fetchWithFileType(ii));
        {% endfor %}

        function fetchWithFileType(url) {
            const fileName = url.split('/').pop(); // 获取URL的最后一部分作为文件名
            console.log('文件名', fileName);
            if (url.endsWith(".mp4")) {
                return fetch(url)
                    .then(response => response.blob()) // 获取二进制数据,然后封装为一个Blob对象
                    .then(blob => new Blob([blob], {type: 'video/mp4'}))
                    .then(blob => ({blob, name: fileName}));
            } else {
                return fetch(url)
                    .then(response => response.blob())
                    .then(blob => new Blob([blob], {type: 'image/jpg'}))
                    .then(blob => ({blob, name: fileName}));
            }
        }


        Promise.all(img_files)
            .then(function (blobs) {
                console.log('Bob对象', blobs)

                for (let i = 0; i < blobs.length; i++) {
                    const contentType = blobs[i].blob.type;
                    // 创建相应的 File 对象
                    var file = new File([blobs[i].blob], blobs[i].name, {type: contentType});
                    all_files.push(file);
                }

                var imgContainer = $(".imgContainer");
                var imgDivs = [];

                for (let i = all_files.length - 1; i >= 0; i--) {
                    var fileelement = getFileElement(all_files[i]);
                    console.log('元素', fileelement)
                    imgDivs.push(fileelement);
                }
                imgContainer.append(imgDivs);

                // 鼠标经过和离开图片所在盒子就显示和隐藏左上角的X
                imgContainer.on('mouseenter', 'div', function (e) {
                    $(this).find('span').css('display', 'inline-block');
                }).on('mouseleave', 'div', function (e) {
                    $(this).find('span').css('display', 'none');
                });

                $('.imgContainer div img').on('click', function () {
                    var imageUrl = $(this).attr('src');
                    // 设置模态框中的图片
                    $('#modalImage').attr('src', imageUrl);

                    // 展示模态框
                    $('#imageModal').css('display', 'flex');
                });

                // 关闭模态框
                $('#imageModal').on('click', function () {
                    $(this).css('display', 'none');
                });
            });
    }


    $('.sub_file').click(function () {
        var formData = new FormData();
        // 将所有选择的文件添加到 FormData
        for (var i = 0; i < all_files.length; i++) {
            formData.append('files', all_files[i]);
        }

        // 添加其他数据到 FormData
        formData.append('content_title', $('#content_title').val());
        formData.append('content_priority', $('.content_priority:checked').val());
        formData.append('content_detail', $('#content_detail').val());
        $.ajax({
            url: '/index/{{ op }}/{{ cid }}/',  // 替换为你的服务器端上传端点
            type: 'POST',
            data: formData,
            async: true, // 设置为异步请求
            processData: false,
            contentType: false,
            xhr: function () {
                var xhr = new window.XMLHttpRequest();
                var lastUpdate = 0;
                // 监听上传进度事件
                xhr.upload.addEventListener("progress", function (evt) {
                    if (evt.lengthComputable) {
                        var now = Date.now();
                        if (now - lastUpdate > 500) { // 控制更新频率为每500毫秒一次
                            var percentComplete = Math.round((evt.loaded / evt.total) * 100);
                            // 在这里更新你的进度条或加载消息
                            layer.msg('正在上传: ' + percentComplete + '%', {icon: 16});
                            lastUpdate = now;
                        }
                    }
                }, false);

                return xhr;
            },
            success: function (response) {
                if (response.code === '200') {
                    console.log('发布成功:', response);
                    layer.msg('发布成功', {icon: 1});
                    setTimeout(function () {
                        parent.layer.closeAll();
                        parent.location.reload(); // 刷新父页面
                    }, 2000);
                } else {
                    console.error('发布失败:', response);
                    layer.msg('发布失败,请填写栏目', {icon: 5});
                }
            },
            error: function (error) {
                console.error('发布失败:', error);
                layer.msg('发布失败', {icon: 5});
            }
        })
    })

    document.addEventListener("DOMContentLoaded", function () {
        start();

    });

</script>

</html>